<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>首页</title>
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/editormd/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
</head>
<body>
    <div id="layout">
        <div class="btns" style="margin-top: 20px">
            <button id="get_md">获取md</button>
            <button id="get_html">获取Html</button>
        </div>
        <div class="editormd" id="test-editormd">
            <textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc" id="content"></textarea>
            <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
            <textarea class="editormd-html-textarea" name="editormd-html-textarea" id="htmlContent"></textarea>
        </div>
    </div>
    <script th:src="@{/editormd/js/jquery.min.js}"></script>
    <script th:src="@{/editormd/js/editormd.js}"></script>
    <script layout:fragment="js_fragments">
        //初始化编辑器
        var testEditor;
        $(function () {
            testEditor = editormd("test-editormd", {
                width: "90%",
                height: 640,
                path: '/editormd/lib/',
                //theme: "dark",
                //previewTheme: "dark",
                //editorTheme: "pastel-on-dark",
                markdown: "",
                codeFold: true,
                //syncScrolling : false,
                saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
                searchReplace: true,
                //watch : false,                // 关闭实时预览
                htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
                //toolbar  : false,             //关闭工具栏
                //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
                emoji: true,
                taskList: true,
                tocm: true,         // Using [TOCM]
                tex: true,                   // 开启科学公式TeX语言支持，默认关闭
                flowChart: true,             // 开启流程图支持，默认关闭
                sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
                //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
                //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
                //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
                //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
                //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: "/upload_img",
                onload: function () {
                    //console.log('onload', this);
                    //this.fullscreen();
                    //this.unwatch();
                    //this.watch().fullscreen();

                    //this.setMarkdown("#PHP");
                    //this.width("100%");
                    //this.height(480);
                    //this.resize("100%", 640);
                }
            });
            //获取编辑器内容
            $("#get_md").click(function () {
                var content = testEditor.getMarkdown();
                console.log(content);
                alert(content);
            });
            $("#get_html").click(function () {
                var content = testEditor.getHTML();
                console.log(content);
                alert(content);
            })

        });

    </script>
</body>
</html>